<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 导航 -->
  <nav>
    <!-- 地址上改变 以#号这种方式的改变  是不会发生页面跳转的 -->
    <!-- 术语：#和#后的字符串 这段URL字符串称为：hash地址（锚点） -->
    <!-- hash的改变也会记录到浏览历史中，通过回退和前进可以切换业务场景 -->
    <!-- 前端路由：监听的hash值得改变，去根据地址显示对应的网页内容 -->
    <a href="#/">发现音乐</a>
    <a href="#/my">我的音乐</a>
    <a href="#/friend">朋友</a>
  </nav>
  <!-- 内容 -->
  <div id="content">
    <!-- 需要根据地址（hash）来进行渲染 -->
  </div>
  <script>
    // 容器
    const content = document.querySelector('#content')
    const render = () => {
      // 获取hash地址
      const hash = location.hash
      // 去除#获取hash上的路径
      const path = hash.replace('#', '')
      // 根据路径渲染网页内容
      switch (path) {
        case '/':
          content.innerHTML = '发现音乐的网页内容'
          break;
        case '/my':
          content.innerHTML = '我的音乐的网页内容'
          break;
        case '/friend':
          content.innerHTML = '朋友的网页内容'
          break;
        default:
          break;
      }
    }
    render()
    // 当hash值变化的时候，动态设置网页内容
    window.onhashchange = function () {
      render()
    }
  </script>
</body>

</html>